<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- 引入初始化文件 -->
    <link rel="stylesheet" href="./css/normalize.css">
    <!-- 引入自己的样式文件 -->
    <link rel="stylesheet" href="./css/index.css">
    <!-- 引入字体图标 -->
    <link rel="stylesheet" href="./fontsidai/iconfont.css">
    <link rel="stylesheet" href="./fontspark/iconfont.css">
    <!-- 菜鸟教程图标库 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    <!-- 网站头像 -->
    <link rel="shortcut icon" href=" ./favicon.ico" />
    <!-- 引入jQuery库，因为用到jQuery -->
    <script src="js/jquery.min.js"></script>
    <title>圣诞树</title>
    <style>
        /* 雪花 */
        
        .snowbg {
            position: absolute;
            width: 100%;
            height: 600px;
            clear: both;
            margin: 0 auto;
            overflow: hidden;
            z-index: 999999
        }
        
        .snow {
            position: absolute;
            top: 0;
            color: #fff;
        }
        /*首页  */
        
        .open {
            position: absolute;
            display: flex;
            justify-content: center;
            align-items: center;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: black;
            z-index: 100000000;
            transition: all 1s;
        }
        
        .open .laoren {
            position: absolute;
            width: 100px;
            height: 100px;
            animation: rotate 3s linear infinite alternate;
        }
        
        .open .kuang {
            display: block;
            position: absolute;
            top: 33%;
            left: 55%;
            width: 100px;
            height: 100px;
        }
        
        .open .span {
            display: block;
            position: absolute;
            top: 36%;
            left: 61%;
            color: white;
            z-index: 2
        }
        /* 圣诞老人动画 */
        
        @keyframes rotate {
            0% {
                transform: rotate(-35deg)
            }
            75% {
                transform: rotate(35deg)
            }
            100% {
                transform: rotate(-35deg)
            }
        }
    </style>
</head>

<body>
    <!-- 打开的首页 -->
    <div class="open">
        <img src="./christmas.png" alt="" class="laoren">
        <img src="./dialog.png" alt="" class="kuang">
        <span class="span">点我看<br>圣诞树</span>
    </div>
    <!-- 雪花 -->
    <div class="snowbg">

    </div>
    <!-- 背景音乐 -->
    <audio autoplay="autoplay" loop="loop" id="audios" src="./Children’s Christmas - We Wish You a Merry Christmas.mp3" type="audio/mp3">
      您的浏览器不支持 audio 元素。
      </audio>
    <!-- merry christmas文字 -->
    <div class="header">
        <p>Merry Christmas</p>
    </div>
    <!-- 圣诞树 -->
    <div class="tree">
        <!-- 星星 -->
        <div class="mask"></div>
        <div class="star">
            <div class="pluse1"></div>
            <div class="pluse2"></div>
            <div class="pluse3"></div>
            <div class="starT">
                <div class="star1"></div>
                <div class="star2"></div>
                <div class="star3"></div>
            </div>
        </div>
        <!-- 树叶 -->
        <div class="leafOne">
            <div class="leaf">
                <div class="leaf_edge"></div>
                <div class="leaf_edgeRight"></div>
            </div>
            <div class="leaf">
                <div class="leaf_edge"></div>
                <div class="leaf_edgeRight"></div>
            </div>
            <div class="leaf">
                <div class="leaf_edge"></div>
                <div class="leaf_edgeRight"></div>
            </div>
            <div class="leaf">
                <div class="leaf_edge"></div>
                <div class="leaf_edgeRight"></div>
            </div>
            <div class="leaf">
                <div class="leaf_edge"></div>
                <div class="leaf_edgeRight"></div>
            </div>
            <div class="leaf">
                <div class="leaf_edge"></div>
                <div class="leaf_edgeRight"></div>
            </div>
            <!-- 树根 -->
            <div class="root">
            </div>
            <!-- 红点点 -->
            <div class="dots">
                <div class="dot"></div>
                <div class="dot1"></div>
                <div class="dot2"></div>
                <div class="dot3"></div>
            </div>
            <!-- 白点点 -->
            <div class="bals">
                <div class="bal"></div>
                <div class="bal1"></div>
                <div class="bal2"></div>
                <div class="bal3"></div>
            </div>
            <!-- 黄点点 -->
            <div class="ds">
                <div class="d"></div>
                <div class="d1"></div>
                <div class="d2"></div>
                <div class="d3"></div>
            </div>
            <!-- 小白点 -->
            <div class="small"></div>
            <div class="small1"></div>
            <!-- 不灵不灵 -->
            <!-- <div class="bl"><i class="fa fa-bell" style="font-size:25px;color:rgb(255, 0, 0);
              "></i></div> -->
            <div class="sidai"><i class="iconfont icon-sidai" style="color:red;
              font-size:140px"></i></div>
            <div class="sidai1"><i class="iconfont icon-sidai" style="color:red;
                font-size:170px"></i></div>
        </div>
        <!-- 闪光 -->
        <div class="spark">
            <i class="iconfont icon-shanguang" style="color:white;
        font-size:30px"></i>
            <i class="iconfont icon-shanguang" style="color:white;
        font-size:20px"></i>
            <i class="iconfont icon-shanguang" style="color:white;
        font-size:10px"></i>
            <i class="iconfont icon-shanguang" style="color:white;
        font-size:5px"></i>
            <i class="iconfont icon-shanguang" style="color:white;
        font-size:20px"></i>
            <i class="iconfont icon-shanguang" style="color:white;
        font-size:20px"></i>
            <i class="iconfont icon-shanguang" style="color:white;
        font-size:20px"></i>
        </div>
    </div>
    <!-- 版权 -->
    <span style="color:#bbb;position:absolute;bottom:30px;right:20px;font-size:14px">代码编写者:刘伟</span>
</body>
<script>
    // 雪花
    $(function() {
        var d = "<div class='snow'>❅<div>"
        setInterval(function() {
            var f = $(document).width();
            var e = Math.random() * f - 100;
            var o = 0.3 + Math.random();
            var fon = 10 + Math.random() * 30;
            var l = e - 10 + 200 * Math.random();
            var k = 2000 + 5000 * Math.random();
            $(d).clone().appendTo(".snowbg").css({
                left: e + "px",
                opacity: o,
                "font-size": fon,
            }).animate({
                top: "600px",
                left: l + "px",
                opacity: 0.1,
            }, k, "linear", function() {
                $(this).remove()
            })
        }, 200)

    })
</script>
<script>
    // 首页上移
    var laoren = document.querySelector('.laoren')
    var kuang = document.querySelector('.kuang')
    var span = document.querySelector('.span')
    var open = document.querySelector('.open')
    laoren.onclick = function() {
        document.getElementById('audios').play();
        open.style.height = '15%';
        open.style.zIndex = '1';
        kuang.style.display = 'none'
        span.style.display = 'none'
    }
</script>

</html>